<section>
    <div class="modal-header">
        <h3 class="modal-title">Message preview</h3>
    </div>
    <div class="modal-body">

        <div class="panel-body">

            <p><strong>Topic</strong> {{topicName}}</p>
            <p><strong>Message Id:</strong> {{previewedMessage.metadata.id}}</p>
            <p><strong>Message timestamp:</strong> {{previewedMessage.metadata.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</p>
            <p><strong>Partition:</strong> {{partition}}</p>
            <p><strong>Offset:</strong> {{offset}}</p>

            <p>
                <strong>Message:</strong>
                        <pre class="pre-scrollable">
{{previewedMessage.message}}
                        </pre>
            </p>

            <div class="modal-footer">
                <button class="btn btn-warning" ng-click="$dismiss()">Close</button>
            </div>
        </div>
    </div>
</section>